<template>
  <!-- 搜索框 -->
  <div >
    <form action="/">
      <van-search
          v-model="searchValue"
          shape="round"
          show-action
          placeholder="请输入搜索标签"
          background="#dfe1e5"
          @click-left-icon="onSearch"
          @cancel="onCancel"
      >
      </van-search>
    </form>
  </div>

  <!-- 分割线 -->
  <van-divider dashed>已选标签</van-divider>


  <van-empty class="emptyTagImg" v-if="activeIds.length === 0"/>

  <!--选中的标签-->
  <van-row style="margin-left: 10px">
    <van-col style="width: 100px" v-for="tagName in activeIds" >
      <van-tag :show="show" closeable size="medium" type="primary" @close="doClose(tagName)">
        {{tagName}}
      </van-tag>
    </van-col>
  </van-row>




  <!-- 分割线 -->
  <van-divider dashed>选择标签</van-divider>


  <van-tree-select
  v-model:active-id="activeIds"
  v-model:main-active-index="activeIndex"
  :items="tagList"
  />

  <!-- 搜索选中标签列表所  对应的用户 -->
  <van-button round type="primary" block
  @click="onSearchUsers">搜索</van-button>
  


</template>


<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {tagStore} from "../stores/tag/tag.ts";
import {getAllTagAndCategoryToSearch} from "../api/tagApi.ts";

let originTagList = [//数据（数据库中来）(原本数据)
  {
    text: '性别',
    children: [
      { text: '男', id: '男' },
      { text: '女', id: '女' },
    ],
  },
  {
    text: '方向',
    children: [
      { text: 'java', id: 'java' },
      { text: 'c++', id: 'c++' },
      { text: 'python', id: 'python' },
      { text: '前端', id: '前端' },
      { text: '大数据', id: '大数据' },
    ],
  },
  {
    text: '水平',
    children: [
      { text: '初级', id: '初级' },
      { text: '中级', id: '中级' },
      { text: '高级', id: '高级' },
      { text: '王者', id: '王者' },
    ],
  },
];
//copy
const tagList = ref([...originTagList]);

//搜索组件相关信息

const searchValue = ref('');
//搜索图标==检索标签的方法
const onSearch = () => {
  //originTagList中过滤出来(拷贝一份过滤后的数据，原始数据不能变)
  tagList.value = originTagList.map(parentTag =>{
    const tempParentTag = {...parentTag};
    const tempChildren = [...parentTag.children];
    tempParentTag.children = tempChildren.filter(item => item.text.includes(searchValue.value));
    return tempParentTag;
  });
};


//取消按钮
const onCancel = () => {
  searchValue.value = '';
  tagList.value = [...originTagList];//重新变回原数据
};


//单个可关闭标签组件相关信息
const show = ref(true);
const doClose = (tag:string) => {
  activeIds.value = activeIds.value.filter((item) => {
      return item !== tag;
  })
};


//Tree选择器组件相关信息
const activeIds = ref([]);//选中id的数组内容(有则高亮)
const activeIndex = ref(0);//左侧默认选中高亮


//button组件相关信息,查找匹配用户
const router = useRouter();
const onSearchUsers = () =>{//跳转到配对的用户界面
  const tagStoreAPI = tagStore();
  console.log(activeIds.value);
  tagStoreAPI.setTagNameList(activeIds.value);
  router.push({
    path:'/user/searchResult',
  })
};

onMounted(async ()=>{
  const res = await getAllTagAndCategoryToSearch();
  if(200 == res.code){
    originTagList = res.data;
    tagList.value = res.data;
  }


});





</script>

<style scoped>

div {
  position: relative;
  top: 0;
  width: 100%;
}
form {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
.emptyTagImg{
  height: 35px;
  margin:  0px 0px 20px 0px;
}
</style>